<template>
    <button @click="open = true">Open Modal</button>
    <div v-if="open" class="modal-demo">
        <p>Hello from the modal!</p>
        <button @click="open = false">Close</button>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const open = ref(false);
</script>
<style scoped>
.modal {
    position: fixed;
    top: 20%;
    left: 50%;
    z-index: 999;
    margin-left: -150px;
    width: 300px;
}

.modal-demo {
    position: fixed;
    top: 20%;
    left: 50%;
    z-index: 999;
    padding: 30px;
    margin-left: -150px;
    width: 300px;
    background-color: var(--vt-c-bg);
    border-radius: 8px;
    box-shadow: 0 4px 16px #00000026;
}
</style>
